<script setup>
	import {getCurrentInstance, onMounted, ref} from "vue";
	import {
		addStructure,
		delStructure,
		getStructureByKey,
		getStructurePage,
		uploadRichImgApi,
		updStructure
	} from "@/api/company/structure";
	import { getPositionPage } from "@/api/company/position";
	import Pagination from "@/components/Pagination/index.vue";
	import Edit from "./edit.vue";
	import emitter from "@/utils/mitt";
	import { getToken } from "@/utils/auth";
	const {proxy} = getCurrentInstance();
	
	const queryForm = ref(null);
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		searchText: null,
		positionId: null
	});
	
	const tFlag = [
		{
			label: '是',
			value: '1',
			elTagType: 'primary',
		},
		{
			label: '否',
			value: '0',
			elTagType: 'danger'
		},
	]
	
	const positionOption = ref([])
	const getPositionOption = async () => {
		const res = await getPositionPage({ pageNum: 1, pageSize: 999 })
		try {
			if(res.code === 200) {
				positionOption.value = res.data.records
			}
		}
		catch(e) {
			console.log(e);
		}
	}
	
	const loading = ref(false);
	
	const tableData = ref([])
	const rowId = ref(null)
	const total = ref(0)
	const search = () => {
		getTableData()
	}
	const getTableData = async () => {
		loading.value = true
		const res = await getStructurePage({...queryParams.value})
		if(res.code === 200) {
			tableData.value = res.data.records
			total.value = res.data.total;
		}
		loading.value = false
	}
	
	const handleDelete = async (row) => {
		proxy.$modal.confirm('是否确认删除名称为"' + row.userName + '"的人员项?').then(async function () {
			const res = await delStructure({id: row.id})
			try {
				if(res.code === 200) {
					proxy.$modal.msgSuccess('删除成功')
					await getTableData()
				}
			}
			catch(e) {
				console.log(e);
			}
		})
	}
	
	const handleUpdate = async (row) => {
		rowId.value = row.id
		editVisible.value = true
	}
	
	const addMember = () => {
		rowId.value = null
		editVisible.value = true
	}
	
	const editVisible = ref(false)
	const closeEdit = (ifSubmit = false) => {
		rowId.value = null
		editVisible.value = false
		if(ifSubmit) {
			search()
		}
	}
	
	onMounted(() => {
		getPositionOption()
		search()
		emitter.on( 'closeEdit', (ifSubmit) => {
			closeEdit(ifSubmit)
		})
	})
	
</script>

<template>
	<div class="app-container">
		<el-form
			ref="queryForm"
			:model="queryParams"
			inline
			label-width="68px"
			@submit.native.prevent
		>
			<el-form-item label="人员名称" prop="searchText">
				<el-input
					:style="{ width: '200px' }"
					v-model="queryParams.searchText"
					clearable
					placeholder="请输入人员名称"
				></el-input>
			</el-form-item>
			<el-form-item label="职位" prop="positionId">
				<el-select v-model="queryParams.positionId" clearable placeholder="请选择职位">
					<el-option v-for="item in positionOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button :disabled="loading" icon="Search" type="primary" @click="search" />
				<el-button :disabled="loading" type="primary" @click="addMember">添加人员</el-button>
			</el-form-item>
		</el-form>
		<el-table
			v-loading="loading"
			:data="tableData"
			border
		>
			<el-table-column show-overflow-tooltip label="人员名称" prop="userName"/>
			<el-table-column show-overflow-tooltip label="职位" prop="positionName"/>
			<el-table-column label="政治面貌" prop="politicsStatus"></el-table-column>
			<el-table-column label="置顶" prop="isTop" width="80">
				<template #default="scope">
					<dict-tag :options="tFlag" :value="String(scope.row.isTop)"/>
				</template>
			</el-table-column>
			<el-table-column label="是否显示" prop="isView" width="80">
				<template #default="scope">
					<dict-tag :options="tFlag" :value="String(scope.row.isView)"/>
				</template>
			</el-table-column>
			<el-table-column label="排序值" prop="sort" width="70"/>
			<el-table-column label="添加时间" prop="createTime" />
			<el-table-column class-name="small-padding fixed-width" label="操作" width="120">
				<template #default="scope">
					<el-button
						:size="'small'"
						type="primary"
						icon="Edit"
						text
						@click="handleUpdate(scope.row)"
					>编辑
					</el-button>
					<el-button
						:size="'small'"
						type="danger"
						icon="Delete"
						text
						@click="handleDelete(scope.row)"
					>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="search"
		></pagination>
		
		<el-dialog
			v-model="editVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:title="rowId ? '修改人员' : '添加人员'"
			:width="'90%'"
			center
			destroy-on-close
			@close="closeEdit"
		>
			<edit class="dialogEdit" v-if="editVisible" :row-id="rowId" @close="closeEdit"></edit>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped>
	.dialogEdit {
		height: calc(82vh - 100px) !important;
	}
</style>
